<template>
	<view class="page">
		<view class="nav">
			<uni-icons type="back" size="24" @click="goBack"></uni-icons>
			<text class="nav-title">添加朋友</text>
			<view style="width:24px"></view>
		</view>

		<view class="search">
			<uni-easyinput v-model="keyword" placeholder="搜索用户名" :clearable="true" @confirm="onAdd" confirm-type="search"></uni-easyinput>
			<button class="add-btn" @click="onAdd">添加</button>
		</view>

		<view class="quick-grid">
			<view class="q-item" @click="tip('通讯录')"><uni-icons type="contact" size="26"></uni-icons><text>通讯录</text></view>
			<view class="q-item" @click="tip('扫一扫')"><uni-icons type="scan" size="26"></uni-icons><text>扫一扫</text></view>
			<view class="q-item" @click="tip('微信朋友')"><uni-icons type="weixin" size="26" color="#07c160"></uni-icons><text>微信朋友</text></view>
			<view class="q-item" @click="tip('面对面')"><uni-icons type="phone" size="26"></uni-icons><text>面对面</text></view>
		</view>

		<view class="section-title">为你推荐</view>

		<scroll-view scroll-y class="list">
			<view class="recs recs--single">
				<view class="rec-card rec-card--row" v-for="user in recommends" :key="user.id">
					<image class="avatar" :src="user.avatar" mode="aspectFill"></image>
					<view class="info">
						<text class="name">{{ user.name }}</text>
						<text class="desc">可能认识的人</text>
					</view>
					<view class="actions">
						<button class="pill" size="mini" type="primary" @click="addFromRecommend(user)">关注</button>
						<text class="remove" @click="removeRecommend(user.id)">×</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { addFriend } from '@/utils/chatStore.js'
import { onLoad } from '@dcloudio/uni-app'

const keyword = ref('')

function cute(emoji, c1 = '#FFE5F1', c2 = '#E0F2FE') {
	const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96'>
<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%' stop-color='${c1}'/><stop offset='100%' stop-color='${c2}'/></linearGradient></defs>
<rect width='100%' height='100%' rx='48' ry='48' fill='url(#g)'/>
<text x='50%' y='58%' font-size='48' text-anchor='middle' dominant-baseline='middle'>${emoji}</text>
</svg>`
	return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg)
}

const recommends = ref([
	{ id: 'r1', name: '大俪', avatar: cute('😺','#FFE0E6','#FFF7CC') },
	{ id: 'r2', name: '是七七吖', avatar: cute('🌸','#E3F2FD','#FCE4EC') },
	{ id: 'r3', name: 'DG潮牌', avatar: cute('🕶️','#EDE9FE','#DBEAFE') },
	{ id: 'r4', name: '小丸子', avatar: cute('🎀','#FFF1B6','#FFD5E5') },
	{ id: 'r5', name: '木木子', avatar: cute('🍀','#D1FAE5','#E0F2FE') },
	{ id: 'r6', name: '风见莉', avatar: cute('🦄','#E9D5FF','#C7D2FE') },
	{ id: 'r7', name: '阿哲', avatar: cute('😎','#FFE4D6','#E0E7FF') },
	{ id: 'r8', name: '凌风', avatar: cute('🌟','#FFF7CC','#E0F2FE') },
	{ id: 'r9', name: '星野澈', avatar: cute('🌙','#DBEAFE','#EDE9FE') },
	{ id: 'r10', name: '安然', avatar: cute('🍓','#FFE4E6','#FEF9C3') }
])

onLoad(() => {})

function goBack() { uni.navigateBack() }
function tip(t) { uni.showToast({ title: t + ' 暂未实现', icon: 'none' }) }
function onAdd() { const name = (keyword.value || '').trim(); if (!name) { uni.showToast({ title: '请输入用户名', icon: 'none' }); return } addFriend(name); uni.showToast({ title: '已添加', icon: 'success' }); setTimeout(() => { uni.navigateBack() }, 300) }
function addFromRecommend(u) { addFriend(u.name, u.avatar); uni.showToast({ title: '已关注', icon: 'success' }); setTimeout(() => { uni.navigateBack() }, 300) }
function removeRecommend(id) { const i = recommends.value.findIndex(x => x.id === id); if (i !== -1) recommends.value.splice(i, 1) }
</script>

<style scoped lang="scss">
.page { background: #fff; height: 100vh; display: flex; flex-direction: column; }
.nav { height: 118rpx; display: flex; align-items: center; justify-content: space-between; padding: 0 28rpx; border-bottom: 1px solid #eee; }
.nav-title { font-size: 38rpx; font-weight: 700; }
.search { display: flex; gap: 16rpx; padding: 30rpx 20rpx 22rpx; }
.add-btn { flex: 0 0 auto; min-width: 140rpx; height: 72rpx; line-height: 72rpx; font-size: 26rpx; background: #3b82f6; color: #fff; border-radius: 12rpx; padding: 0 18rpx; border: none; }
.add-btn:active { opacity: 0.9; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16rpx; padding: 26rpx 20rpx; }
.q-item { background: #f7f7f7; border-radius: 16rpx; height: 148rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10rpx; }
.section-title { padding: 26rpx 20rpx 18rpx; color: #6b7280; font-size: 26rpx; }
.list { flex: 1; padding: 8rpx 12rpx 16rpx; }

/* 单列样式：一人一行 */
.recs.recs--single { display: flex; flex-direction: column; gap: 12rpx; }
.rec-card.rec-card--row { background: #ffffff; border: 1px solid #f1f1f1; border-radius: 16rpx; padding: 14rpx 16rpx; display: grid; grid-template-columns: 72rpx 1fr auto; align-items: center; column-gap: 12rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03); }
.rec-card--row .avatar { width: 72rpx; height: 72rpx; border-radius: 50%; }
.rec-card--row .info { display: flex; flex-direction: column; overflow: hidden; }
.rec-card--row .name { font-size: 30rpx; font-weight: 600; color: #111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-card--row .desc { font-size: 22rpx; color: #9aa0a6; margin-top: 6rpx; }
.actions { display: flex; align-items: center; gap: 12rpx; }
.pill { padding: 0 24rpx; border-radius: 999rpx; line-height: 56rpx; height: 56rpx; font-size: 24rpx; }
.remove { width: 44rpx; height: 44rpx; line-height: 44rpx; text-align: center; border-radius: 22rpx; background: #f3f4f6; color: #9aa0a6; font-size: 28rpx; }
</style>


